<template>
	<el-dialog title="新增" :visible.sync="dialogAdd" :before-close="handleClose" :close-on-click-modal="false"
	 :close-on-press-escape="false">
		<el-form label-width="100px" :model='addForm' ref="addForm">
			<el-form-item label="节点编码" prop="nodeCode" :rules="{ required: true, message: '请输入节点编码' }">
				<el-col :span="12">
					<el-input placeholder="请输入节点编码" v-model="addForm.nodeCode"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="节点名称" prop="nodeName" :rules="{ required: true, message: '请输入节点名称' }">
				<el-col :span="12">
					<el-input placeholder="请输入节点名称" v-model="addForm.nodeName"></el-input>
				</el-col>
			</el-form-item>
			<el-form-item label="节点类型" prop="nodeType" :rules="{ required: true, message: '选择节点类型' }">
				<el-radio-group v-model="addForm.nodeType">
					<el-radio v-for="item in nodeTypeData" :label="item.id" :key="item.id" border>{{item.name}}</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="启用状态" prop="enabled">
				<el-col :span="12">
					<el-switch v-model="addForm.enabled" active-value="Y" inactive-value="N"></el-switch>
				</el-col>
			</el-form-item>
			<el-form-item label="排序" prop="sortNo">
				<el-col :span="12">
					<el-input-number v-model="addForm.sortNo"></el-input-number>
				</el-col>
			</el-form-item>
			<el-form-item label="访问地址" prop="nodeUrl" :rules="{ required: true, message: '请输入访问地址' }" v-if="addForm.nodeType=='fb5c03b5e524455888c4eb52cbcf1baa'">
				<el-col :span="12">
					<el-input placeholder="请输入访问地址" v-model="addForm.nodeUrl"></el-input>
				</el-col>
				<el-col :span="12" style="padding-left: 10px;">
					<el-checkbox border true-label="/layout" false-label="" v-model="addForm.layout">顶部导航</el-checkbox>
					<el-checkbox border true-label="/frame" false-label="" v-model="addForm.frame">侧边导航</el-checkbox>
				</el-col>
			</el-form-item>
			<el-form-item label="普通图标">
				<el-col :span="24" class="upload-no-trans">
					<el-upload list-type="picture-card" :headers="nodeIconUploadHeaders()" :action="fileuploadUrl" :file-list="nodeIconDList"
					 :on-change="nodeIconDUploadChange" :on-remove="nodeIconDRemove" :on-success="nodeIconDUploadSuccess" :on-error="nodeIconUploadError">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">图标大小不超过500kb，推荐上传尺寸100px*100px,色值 #909399 的png文件</div>
					</el-upload>
				</el-col>
			</el-form-item>
			<el-form-item label="高亮图标">
				<el-col :span="24" class="upload-no-trans">
					<el-upload list-type="picture-card" :headers="nodeIconUploadHeaders()" :action="fileuploadUrl" :file-list="nodeIconLList"
					 :on-change="nodeIconLUploadChange" :on-remove="nodeIconLRemove" :on-success="nodeIconLUploadSuccess" :on-error="nodeIconUploadError">
						<i slot="default" class="el-icon-plus"></i>
						<div slot="tip" class="el-upload__tip">图标大小不超过500kb，推荐上传尺寸100px*100px,色值 #909399 的png文件</div>
					</el-upload>
				</el-col>
			</el-form-item>
			<el-form-item label="说明" prop="nodeDesc">
				<el-col :span="16">
					<el-input type="textarea" :rows="3" placeholder="请输入说明" v-model="addForm.nodeDesc"></el-input>
				</el-col>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="handleCheckAddSave('addForm')">保存 <i class="el-icon-document-checked"></i></el-button>
			<el-button type="danger" @click="handleClose">关闭 <i class="el-icon-close"></i></el-button>
		</span>
	</el-dialog>
</template>

<script>
	import {
		getCookie //获取cookie
	} from '@/api/layout/layout.js'
	import {
		fileuploadUrl, //文件上传接口（无状态）
		attachPath, //附件绝对地址
		uploadByBusinessUrl, //上传接口
		findAttchList, //获取文件列表
		preview, //预览图片
		deleteAttid //附件删除
	} from '@/api/attachCommon/attachCommon.js'
	import {
		postMenuFun, //保存节点
		postMenuFunNext, //保存下级节点
	} from '@/api/authority/menuManage/menuManage.js'

	import {
		Dialog,
		MessageBox,
		Message,
		Upload,
	} from 'element-ui';

	export default {
		name: "AddForm",
		components: {
			'el-dialog': Dialog, //对话框
			'el-upload': Upload, //附件

		},
		props: ['refTree', 'appForm', 'editForm', 'dialogAdd', 'nodeTypeData'],
		data() {
			return {
				fileuploadUrl: fileuploadUrl, //附件上传接口
				fileList: [], //附件队列
				nodeIconDList:[],
				nodeIconLList:[],
				addForm: {
					nodeCode: "", //节点编码
					nodeName: "", //节点名称
					nodeType: "", //节点类型
					enabled: "Y", //启用状态
					nodeUrl: "", //功能url
					realAddr: "",
					layout: "/layout",
					frame: "/frame",
					nodeIcon: "", //图标
					nodeIconD: "", //常用图标
					nodeIconL: "", //高亮图标
					nodeDesc: "" //说明
				}
			}
		},
		methods: {
			/* 设置上传附件的请求头（认证信息） */
			nodeIconUploadHeaders() {
				return {
					Authorization: getCookie("Authorization") //认证信息
				}
			},
			/* 文件移除 (普通图标)*/
			nodeIconDRemove(file) {
				this.addForm.nodeIconD = ""
			},
			/* 文件移除 (高亮图标)*/
			nodeIconLRemove(file) {
				this.addForm.nodeIconL = ""
			},
			/* 附件上传拦截 (普通图标)*/
			nodeIconDUploadChange(file, fileList) { //文件发生改变
				var imageClass = file.name.substring(file.name.lastIndexOf(".") + 1);
				const imageStyle =
					imageClass === "jpg" ||
					imageClass === "JPG" ||
					imageClass === "png" ||
					imageClass === "PNG" ||
					imageClass === "bpm" ||
					imageClass === "BPM" ||
					imageClass === "JPEG" ||
					imageClass === "jpeg";
				if (!imageStyle) {
					Message({
						message: "上传图片只能是jpg / png / bpm/jpeg格式!",
						type: "error"
					});
					fileList.pop()
					this.nodeIconDList = fileList
				} else {
					if (fileList.length > 1) {
						fileList.splice(0, 1)
					}
					this.nodeIconDList = fileList
					return imageStyle
				}
			},
			/* 附件上传拦截 (高亮图标)*/
			nodeIconLUploadChange(file, fileList) { //文件发生改变
				var imageClass = file.name.substring(file.name.lastIndexOf(".") + 1);
				const imageStyle =
					imageClass === "jpg" ||
					imageClass === "JPG" ||
					imageClass === "png" ||
					imageClass === "PNG" ||
					imageClass === "bpm" ||
					imageClass === "BPM" ||
					imageClass === "JPEG" ||
					imageClass === "jpeg";
				if (!imageStyle) {
					Message({
						message: "上传图片只能是jpg / png / bpm/jpeg格式!",
						type: "error"
					});
					fileList.pop()
					this.nodeIconLList = fileList
				} else {
					if (fileList.length > 1) {
						fileList.splice(0, 1)
					}
					this.nodeIconLList = fileList
					return imageStyle
				}
			},
			/* 文件上传(提交)接口成功（普通图标） */
			nodeIconDUploadSuccess(res) {
				if (res.code != 10000) {
					Message.error('上传失败')
					return
				}
				this.addForm.nodeIconD = attachPath + res.data[0].filePth
			},
			/* 文件上传(提交)接口成功 (高亮图标）)*/
			nodeIconLUploadSuccess(res) {
				if (res.code != 10000) {
					Message.error('上传失败')
					return
				}
				this.addForm.nodeIconL = attachPath + res.data[0].filePth
			},
			/* 文件上传(提交)接口失败 */
			nodeIconUploadError(err) {
				Message.error('操作失败')
			},
			handleClose() { //编辑弹框关闭提示框
				this.$refs.addForm.resetFields();
				this.nodeIconDList.splice(0,this.nodeIconDList.length)
				this.nodeIconLList.splice(0,this.nodeIconLList.length)
				this.$emit('addData', false)
			},
			handleCheckAddSave(formName) { //新增弹框保存按钮事件
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let cData = this.refTree.getCurrentNode()
						let sendDatas = this.addForm;
						let url;
						sendDatas.realAddr = ""; //补充路径
						if (sendDatas.layout) { //顶部导航
							sendDatas.realAddr += sendDatas.layout
						}
						if (sendDatas.frame) { //侧边栏
							sendDatas.realAddr += sendDatas.frame
						}
						sendDatas.nodeIcon = ""
						if (sendDatas.nodeIconD) { //普通图标
							sendDatas.nodeIcon += sendDatas.nodeIconD
						}
						if (sendDatas.nodeIconL) { //高亮图标
							sendDatas.nodeIcon += ',' + sendDatas.nodeIconL
						}
						sendDatas.appId = this.appForm.appId;
						/* 保存节点成功的回调*/
						let saveNodeThen = (res) => {
							if (res.data.code == 10000) {
								Message({
									type: 'success',
									message: '新增成功'
								});
								if (!cData.upNodeId) {
									sendDatas.upNodeId = -1;
								}
								let addDatas = JSON.parse(JSON.stringify(sendDatas));
								addDatas.nodeId = res.data.data;
								this.$emit('addData', false, addDatas)
							}
						}
						if (cData.upNodeId) { //新增子节点
							sendDatas.upNodeId = cData.nodeId;
							postMenuFunNext(sendDatas).then(saveNodeThen)
						} else { //新增根节点
							postMenuFun(sendDatas).then(saveNodeThen)
						}

					}
				});
			}
		}
	}
</script>
